<template>
  <view class="teacher-detail-page">
    <!-- 教师头部信息 -->
    <view class="teacher-header">
      <view class="profile-section">
        <view class="profile-avatar">
          <image :src="teacherInfo.avatar" :alt="teacherInfo.name" />
        </view>
        <view class="teacher-basic-info">
          <view class="teacher-name-row">
            <text class="teacher-name">{{ teacherInfo.name }}</text>
            <text class="recommendation-tag" v-if="teacherInfo.isRecommended">本周推荐名师</text>
            <view class="favorite-btn" @click="toggleFavorite">
              <text class="iconfont-v2 icon-shoucang favorite-icon" :class="{ active: isFavorited }"></text>
            </view>
          </view>
          <text class="teacher-specialty">{{ teacherInfo.specialty }}</text>
        </view>
      </view>
    </view>

    <!-- 名师简介 -->
    <view class="teacher-intro-section">
      <view class="intro-card">
        <text class="section-title">名师简介</text>
        <text class="intro-content">{{ teacherInfo.introduction }}</text>
      </view>
    </view>

    <!-- 他的课程 -->
    <view class="courses-section">
      <text class="section-title">他的课程</text>
      <view class="course-card" v-for="(course, index) in teacherCourses" :key="index" @click="goCourseDetail(course)">
        <view class="course-thumbnail">
          <image :src="course.thumbnail" :alt="course.title" />
        </view>
        <view class="course-info">
          <text class="course-title">{{ course.title }}</text>
          <text class="course-details">{{ course.details }}</text>
          <view class="enrollment-info">
            <view class="student-avatars">
              <view class="student-avatar" v-for="(student, idx) in course.students" :key="idx">
                <image :src="student.avatar" :alt="student.name" />
              </view>
            </view>
            <text class="enrollment-count">{{ course.enrollment }}人已报名</text>
            <button class="enroll-btn" @click.stop="enrollCourse(course)">
              <text>立即报名</text>
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFavorited: false,
      
      // 教师信息
      teacherInfo: {
        name: "李世民同学",
        specialty: "主攻英语方面教会学",
        avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
        isRecommended: true,
        introduction: "拥有10年教学经验，专注于英语教学，擅长帮助学生提高英语水平。教学方法独特，深受学生喜爱。"
      },
      
      // 教师课程
      teacherCourses: [
        {
          id: 1,
          title: "英语四级强化训练",
          details: "系统学习英语四级考试技巧",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          enrollment: 1250,
          students: [
            { name: "学生1", avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg" },
            { name: "学生2", avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg" },
            { name: "学生3", avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg" }
          ]
        },
        {
          id: 2,
          title: "英语口语提升",
          details: "提高英语口语表达能力",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          enrollment: 890,
          students: [
            { name: "学生1", avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg" },
            { name: "学生2", avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg" },
            { name: "学生3", avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg" }
          ]
        },
        {
          id: 3,
          title: "英语写作技巧",
          details: "掌握英语写作方法和技巧",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          enrollment: 650,
          students: [
            { name: "学生1", avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg" },
            { name: "学生2", avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg" },
            { name: "学生3", avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg" }
          ]
        }
      ]
    }
  },
  methods: {
    toggleFavorite() {
      this.isFavorited = !this.isFavorited;
      uni.showToast({
        title: this.isFavorited ? "收藏成功" : "取消收藏",
        icon: 'success'
      });
    },
    goCourseDetail(course) {
      console.log("查看课程详情:", course);
      uni.navigateTo({
        url: `/pages/fast/course-detail?id=${course.id}`
      });
    },
    enrollCourse(course) {
      console.log("报名课程:", course);
      uni.showModal({
        title: "确认报名",
        content: `确定要报名《${course.title}》吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: "报名成功",
              icon: 'success'
            });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.teacher-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.teacher-header {
  background: white;
  padding: 40rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .profile-section {
    display: flex;
    align-items: center;
    gap: 24rpx;

    .profile-avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .teacher-basic-info {
      flex: 1;

      .teacher-name-row {
        display: flex;
        align-items: center;
        gap: 16rpx;
        margin-bottom: 12rpx;

        .teacher-name {
          font-size: 36rpx;
          font-weight: 600;
          color: #333;
        }

        .recommendation-tag {
          background: #ED6567;
          color: white;
          padding: 6rpx 16rpx;
          border-radius: 20rpx;
          font-size: 20rpx;
          font-weight: 500;
        }

        .favorite-btn {
          margin-left: auto;

          .favorite-icon {
            font-size: 32rpx;
            color: #ccc;
            cursor: pointer;
            transition: all 0.3s ease;

            &.active {
              color: #ED6567;
            }

            &:hover {
              color: #ED6567;
            }
          }
        }
      }

      .teacher-specialty {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}

.teacher-intro-section {
  background: white;
  margin: 0 20rpx 20rpx;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .intro-card {
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 24rpx;
      display: block;
    }

    .intro-content {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      display: block;
    }
  }
}

.courses-section {
  background: white;
  margin: 0 20rpx 20rpx;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
    display: block;
  }

  .course-card {
    display: flex;
    margin-bottom: 30rpx;
    padding-bottom: 30rpx;
    border-bottom: 2rpx solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;

    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    &:hover {
      transform: translateY(-2rpx);
    }

    .course-thumbnail {
      width: 200rpx;
      height: 140rpx;
      border-radius: 16rpx;
      overflow: hidden;
      margin-right: 24rpx;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .course-info {
      flex: 1;

      .course-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
        display: block;
        line-height: 1.3;
      }

      .course-details {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 16rpx;
        display: block;
        line-height: 1.4;
      }

      .enrollment-info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .student-avatars {
          display: flex;
          gap: -8rpx;

          .student-avatar {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            border: 4rpx solid white;
            overflow: hidden;

            &:not(:first-child) {
              margin-left: -8rpx;
            }

            image {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }

        .enrollment-count {
          font-size: 24rpx;
          color: #666;
        }

        .enroll-btn {
          background: #ED6567;
          color: white;
          border: none;
          border-radius: 40rpx;
          padding: 12rpx 24rpx;
          font-size: 24rpx;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            background: #d55a54;
          }

          text {
            color: white;
          }
        }
      }
    }
  }
}
</style>